<template>
	<div class="words-item-list zc">
		<div class="words-item" v-for="(item, index) in props.data" :key="index">
			<div class="word">
				<Words :text="item" :size="size" :border-draw="false" />
			</div>
			<div class="word-zc">
				<div class="zc">
					(<div class="input">
						<text>{{ showResult(index, 0) }}</text>
					</div>)
				</div>
				<div class="zc">
					(<div class="input">
						<text>{{ showResult(index, 1) }}</text>
					</div>)
				</div>
			</div>
		</div>
	</div> 
</template>

<script setup>
import Words from "@/components/words/index.vue"
import Props from "../props.js"
const props = defineProps({
	...Props,
	size: {
		type: Number,
		default: 8
	}
})
const emit = defineEmits(['answer'])
const showResult = (index, i) => {
	const result = props.result?.[index]
	return result ? props.result?.[index]?.[i] || '' : ''
}
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";
.words-item-list {
	display: flex;
	flex-wrap: wrap;
	color: $gray-ligh-3;
	.words-item {
		margin-bottom: 1.6rem;
		width: 50%;
		font-size: 1.6rem;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		.word {
			color: $primary-text;
		}
	}
}
.word-zc {
	margin-left: 0.5rem;
	position: relative;
	top: -0.4rem;
	.zc {
		display: flex;
		align-items: center;
		width: 100%;
	}
}
.input {
	width: 7rem;
	height: 3.2rem;
	padding: 0 0.8rem;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	text {
		color: $gray-ligh-1;
	}
}
</style>